var echarts = require('echarts');

var cvalue, detail,username;
var resp_photo;
$(document).on("pageinit", "#creditPage", controllerInit);

function controllerInit() {
    initValue();
    bindEvent();
    cvalue = cvalue ? cvalue : 50;
    detail = detail ? detail : {
        a: 3,
        b: 3,
        c: 3,
        d: 3,
        e: 3
    };
    settouxLeft(cvalue);
    setGrade(cvalue);
    createChart();
    $("#fanhui").on("touchend",fanhuiFaceDetect);
}

// 返回人脸识别界面
function fanhuiFaceDetect () {
    location.href="./faceDetect.html" + location.search;
}

// 移动头像
function settouxLeft(cvalue) {
    var leftVal = 260 * (cvalue / 100);
    var touxUrl = 'url("../images/faceDetect/' + resp_photo + '")';
    $("#toux_parent").css({
        "left": leftVal + "px",
        "background-image": touxUrl
    });
}

// 设置等级高亮
function setGrade(cvalue) {
    var gradeIndex = parseInt(cvalue / 20);
    $("#credit_text>div:eq(" + gradeIndex + ")>span").css({
        "color": "#fff",
        "background": "#12cef3"
    });

}

// 创建信用五维图(雷达图)
function createChart() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('credit_chart'));
    // 绘制图表
    myChart.setOption({
        title: {
            text: ''
        },
        tooltip: {
            show:false
        },
        radar: {
            // shape: 'circle',
            indicator: [{
                name: '身份',
                max: 5
            }, {
                name: '收入',
                max: 5
            }, {
                name: '行为',
                max: 5
            }, {
                name: '逾期',
                max: 5
            }, {
                name: '负债',
                max: 5
            }],
            center: ['50%', '51%'],
            name: {
                formatter: '{value}',
                textStyle: {
                    color: '#fff'
                }
            },
            splitArea: {
                areaStyle: {
                    color: ['#0d1931', '#0d1931', '#0d1931', '#0d1931']
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(63, 219, 220,0.8)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(63, 219, 220, 0.8)'
                }
            }
        },
        graphic: [{
            type: 'text',
            z: 100,
            left: '132',
            top: '85',
            style: {
                fill: '#fff',
                text: cvalue,
                font: 'bold 28px Microsoft YaHei'
            }
        }],
        /*textStyle: {
            color: '#000'
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(122, 185, 230, 1)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(122, 185, 230, 1)'
            }
        },*/
        color: "#103b5d",
        series: [{
            name: '信用',
            type: 'radar',
            data: [{
                value: [detail.a, detail.b, detail.c, detail.d, detail.e],
                name: username,

                areaStyle: {
                    normal: {
                        opacity: 0.7,
                        color: new echarts.graphic.LinearGradient(0, 0.5, 1, 0.5, [{
                            color: '#01f4e1',
                            offset: 0
                        }, {
                            color: '#1063ef',
                            offset: 1
                        }])
                    }
                }
            }]
        }]
    });
}


// 绑定事件
function bindEvent () {
    $("#submit_btn").on("click",function(){
        location.href = "./taskList.html?fs=" + cvalue;
    });
}

// 初始化变量
function initValue() {
    detail = JSON.parse(sessionStorage.getItem("credit_detail"));
    cvalue = parseInt(sessionStorage.getItem("credit_score"));
    resp_photo = sessionStorage.getItem("credit_photo");
    username = sessionStorage.getItem("username");
}